<template>
  <div class="show">
    <!-- 头部搜索 -->
    <div class="search">
      <el-row>
        <el-col :span="16">
          <div class="gcid-content bg-purple">   
              <el-date-picker
                v-model="datetime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
              &nbsp;
              &nbsp;
              &nbsp;
              <el-select v-model="status" placeholder="请选择状态">
                <el-option
                        v-for="item in statusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            <el-button type="success" plain @click="search">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表格 -->
    <el-table :data="recordList" style="width: 100%" border stripe>
      <el-table-column type="index" align="center" label="序号"></el-table-column>
      <el-table-column prop="uname" label="用户名称" align="center"></el-table-column>
      <el-table-column prop="phone" label="用户电话" align="center"></el-table-column>
      <el-table-column prop="gender" label="性别" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.gender == 0">女</span>
            <span v-if="scope.row.gender == 1">男</span>
        </template>
      </el-table-column>
      <el-table-column prop="cname" label="套餐名称" align="center"></el-table-column>
      <el-table-column prop="start" label="套餐开始时间" align="center"></el-table-column>
      <el-table-column prop="stop" label="套餐结束时间" align="center"></el-table-column>
      <el-table-column prop="time" label="申请时间" align="center"></el-table-column>
      <el-table-column prop="status" label="记录状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">驳回</span>
            <span v-if="scope.row.status == 1">已通过</span>
            <span v-if="scope.row.status == 2">待审核</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" width="300" label="操作" align="center">
          <template slot-scope="scope">
              <el-button type="success" v-if="scope.row.status=='2'" size="mini" @click="adopt(scope.row)">通过</el-button>
              <el-button type="warning" v-if="scope.row.status=='2'" size="mini" @click="reject(scope.row)">驳回</el-button>
              <el-button type="primary" size="mini" @click="queryRecordById(scope.row.reid)">编辑</el-button>
              <el-button type="danger" size="mini"  @click="delRecord(scope.row.reid)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top:20px">   
      <el-pagination 
        class="mpage"
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="queryRecordPage">
      </el-pagination>
    </div>
    

    <!-- 修改记录信息弹出层 -->
    <el-dialog title="修改记录" :visible.sync="updateDialogVisible" width="50%">
      <el-form ref="updatefrom" :model="updatefrom" :rules="updateRules" class="demo-ruleForm" label-position="right" label-width="100px">
        <el-row>
          <el-col :span="12">
              <el-form-item label="状态处理" prop="status">
                  <el-select v-model="updatefrom.status" placeholder="请选择">
                    <el-option
                            v-for="item in statusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
              <el-form-item label="预约时间" prop="time">
                  <el-date-picker
                          type="datetime"
                          placeholder="选择日期"
                          v-model="updatefrom.time"
                          style="width: 100%;"
                         
                  >
                  </el-date-picker>
              </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setForm()">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
     

<script>
//引入时间工具类
import {dateFormat} from '../../assets/js/tools'
export default {
  
  name: "show",
  data() {
    return {
      //分页信息
      currentPage: 1,
      total: 0,
      pageSize: 8,
      //用户信息
      recordList:[
        {
          time:''
        }
      ],
      //角色信息
      roleList:[],
      userId:'',
      //修改用户表单数据
      updatefrom: {
        reid:'',
        status:'',
        time:''
      },
      datetime:['2023/01/31 00:00','2025/12/31 00:00'],

      //性别
      genderList: [{
          value: '0',
          label: '女'
      }, {
          value: '1',
          label: '男'
      }],
      //状态
      statusList: [{
          value: '0',
          label: '驳回'
      }, {
          value: '1',
          label: '已通过'
      }, {
          value: '2',
          label: '待审核'
      }
      ],
      //状态
      status:'',
      // 输入的搜索内容
      input: "",
      //修改表单的验证规则
      updateRules: {
        time: [{ required: true, message: '申请时间必填项', trigger: 'blur' }],
        status: [{ required: true, message: '记录状态为必选项', trigger: 'change' }],
      },
    };
  },
  props: ["post"],
  created() {
    // let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'));//取值;
    // this.userId = userInfo[0].reid;
    //查询所有用户
    // this.queryUser();
    //分页查询所有记录
    this.queryRecordPage(this.currentPage,this.pageSize,'','','');
    //查询所有角色
    // this.queryRole();
  },
  methods: {
    //弹出编辑记录窗口
    queryRecordById(reid) {
      // 请求该记录的数据
      this.axios
        .get("/api/queryRecordById", {
          params: {
            reid: reid
          }
        })
        .then(response => {
          this.updatefrom = response.data[0];
        })
        .catch(error => {
          console.log(error);
        });
      // 展示编辑对话框
      this.updateDialogVisible = true;
    },
    //修改取消
    cancel(){
        this.updateDialogVisible = false;
        this.$message.info("修改操作取消");
    },
    // 提交修改信息
    setForm() {
      this.$refs.updatefrom.validate(valid => {
        if (valid) {
          this.axios.post("/api/updateRecord", this.updatefrom).then(res => {
            if (res.data.code !== 200) {
              return this.$message.error({
                duration: 800,
                message: "修改失败"
              });
            }else{
              this.$message.success({
                duration: 800,
                message: "修改成功"
              });
              // 隐藏对话框
              this.updateDialogVisible = false; 
              // 刷新用户列表数据 
              this.queryRecordPage(this.currentPage,this.pageSize,'','','');
              // 清空修改表单数据 
              this.resetForm('updatefrom');
            }
          });
        } else {
          console.log("表单数据有错误");
          return false;
        }
      });
    },
    //驳回
    reject(row) {
      this.updatefrom.reid = row.reid;
      this.updatefrom.status ='0';
      this.updatefrom.time = row.time;
      this.axios.post("/api/updateRecord", this.updatefrom).then(res => {
        if (res.data.code !== 200) {
          return this.$message.error({
            duration: 800,
            message: "驳回失败"
          });
        }else{
          this.$message.success({
            duration: 800,
            message: "驳回成功"
          });
          // 刷新用户列表数据 
          this.queryRecordPage(this.currentPage,this.pageSize,'','','');
        }
      });
    },
    //通过
    adopt(row) {
      this.updatefrom.reid = row.reid;
      this.updatefrom.status ='1';
      this.updatefrom.time = row.time;
          this.axios.post("/api/updateRecord", this.updatefrom).then(res => {
            if (res.data.code !== 200) {
              return this.$message.error({
                duration: 800,
                message: "通过失败"
              });
            }else{
              this.$message.success({
                duration: 800,
                message: "通过成功"
              });
              // 刷新用户列表数据 
              this.queryRecordPage(this.currentPage,this.pageSize,'','','');
            }
      });
    },

    //查询所有用户
    queryUser(){
      let _this = this;
      //发送异步请求
      this.axios.get("/api/queryUser",{
      }).then(res => {
        _this.recordList = res.data;
        for(var i = 0;i<=_this.recordList.length;i++){
          _this.recordList[i].time = dateFormat(_this.recordList[i].time); 
        }
      });
    },
    //当前页改变时会触发
    handleCurrentChange(val){

      console.log("触发时的当前页",val);
      this.currentPage = val;
    },
    //分页查询所有记录
    queryRecordPage(currentPage,pageSize,status,start,stop){
      console.log(currentPage,",",pageSize)
      this.currentPage = currentPage;
      let _this = this;
      //发送异步请求
      this.axios.get("/api/queryRecordPage",{
        params:{
          currentPage: currentPage,
          pageSize: pageSize,
          status: status,
          start: start,
          stop: stop,
        }
      }).then(res => {
        
        _this.recordList = res.data;
        _this.total = parseInt(res.data[0].backup3);
        if(res.data.backup=='1'){
          this.queryRecordPage(this.currentPage-1,pageSize);
        }
        for(var i = 0;i<=_this.recordList.length;i++){
          _this.recordList[i].start = dateFormat(_this.recordList[i].start); 
          _this.recordList[i].time = dateFormat(_this.recordList[i].time); 
          _this.recordList[i].stop = dateFormat(_this.recordList[i].stop); 
        }
      });
    },
    // 删除记录
    async delRecord(reid) {
      const confirmRes = await this.$confirm(
        "是否确定永久删除该记录?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      // 确认删除返回的是 confirm 字符串
      // 取消删除返回的是 cancel 字符串
      if (confirmRes !== "confirm") {
        return this.$message.error({
          duration: 800,
          message: "已取消删除"
        });
      }
      this.axios
        .get("/api/delRecord", {
          params: {
            reid: reid
          }
        })
        .then(res => {
          if (res.data.code !== 200) {
            return this.$message.error({
              duration: 800,
              message: "删除失败"
            });
          }
          this.$message.success({
            duration: 800,
            message: "删除成功"
          });
          // 刷新用户列表
          this.queryRecordPage(this.currentPage,this.pageSize,'','','');
        });
    },
    //查询所有角色
    queryRole(){
      let _this = this;
      //发送异步请求
      this.axios.get("/api/queryRole",{
      }).then(res => {
        _this.roleList = res.data;
      });
    },

    // 清空添加用户表单
    resetForm(addfrom) {
       this.$refs[addfrom].resetFields();
    },
    // 按照搜索内容搜索
    search() {
      if(this.datetime==null){
        this.queryRecordPage(this.currentPage,this.pageSize,this.status,'','');
      }else{
        let start = dateFormat(this.datetime[0]);
        let stop = dateFormat(this.datetime[1]);
        
        console.log(this.input,",",start,",",stop);
        this.queryRecordPage(this.currentPage,this.pageSize,this.status,start,stop);
      }
    },
  }
};
</script>


<style lang="less" scoped>
.show {
  .search {
    margin-top: 15px;
    .el-input {
      width: 300px;
      margin: 0 30px;
    }
    .el-button {
      width: 100px;
      margin: 0 30px;
    }
  }
  .el-table {
    margin-top: 40px;
  }
}
</style>
